<template>
	<view>
		<view class="head-img">
			<image src="../../static/lbt1.png" class="image"></image>
			<view class="head-img-text">
				<view>{{hospInfo.name}}</view>
				<view>{{time}}</view>
			</view>
		</view>
		<view class="order-date">
			<view>
				<uni-icons type="calendar-filled" size="20" color="#2979FF"></uni-icons>
				预约日期
			</view>
			<view class="order-head">
				<view class="order-head-item">
					<uni-icons type="smallcircle-filled" size="10" color="#2979FF"></uni-icons>
					有号
				</view>
				<view class="order-head-item">
					<uni-icons type="smallcircle-filled" size="10" color="#F0AD4E"></uni-icons>
					休息
				</view>
				<view class="order-head-item">
					<uni-icons type="smallcircle-filled" size="10" color="#8F939C"></uni-icons>
					未开放
				</view>
			</view>
		</view>
		<view class="order-date-detail">
			<view style="display: flex; justify-content: space-around;">
				<view class="order-date-detail-item" v-for="item in weekDay" :key="index">{{weekDays[item%7]}}</view>
			</view>
			<view class="line"></view>
			<view style="display: flex; justify-content: space-around;">
				<view class="order-date-detail-item" v-for="(item,index) in days" :key="index" @click="chooseDate" :data-msgs="item">
					<view style="display: flex; flex-direction: column;" :class="index==flag? 'choose':'' ">
						<text>{{item<10?'0'+item:item}}</text>
						<uni-icons style="margin-left: 5px;" type="smallcircle-filled" size="10" color="#2979FF"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view class="order-date">
			<view>
				<uni-icons type="calendar-filled" size="20" color="#2979FF"></uni-icons>
				排班信息
			</view>
		</view>
		<view class="order-paiban">
			<view class="order-choosedate">
				<uni-icons customPrefix="order" type="icon-hsjcyingyeshijian" color="#2979FF"></uni-icons><text class="order-choosedate">2022-{{chooseMonth<=9? '0'+chooseMonth: chooseMonth}}-{{chooseDay<=9? '0'+chooseDay: chooseDay}} 周{{weekDays[weekDay[chooseDay-days[0]]%7]}}</text>
			</view>
			<view class="order-order" @click="open(0)">
				<uni-icons class="order-choosedate" customPrefix="order" type="icon-hsjcyuyue" color="#DD524D"></uni-icons>
				<view class="order-choosedate">上午</view>
				<view class="order-haoyuan"> 余号：{{tickets[0]}}</view>
				<uni-icons style="margin-left: 130px;" type="arrowright" size="25"></uni-icons>
			</view>
			<view class="order-order" @click="open(1)">
				<uni-icons class="order-choosedate" customPrefix="order" type="icon-hsjcyuyue" color="#DD524D"></uni-icons>
				<view class="order-choosedate">下午</view>
				<view class="order-haoyuan">余号：{{tickets[1]}}</view>
				<uni-icons style="margin-left: 130px;" type="arrowright" size="25"></uni-icons>
			</view>
		</view>
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog mode="input" title="个人信息" :duration="2000" :before-close="true" @close="close" @confirm="confirm">
				<view>
					<uni-forms ref="form" :value="user" :rules="rules">
						<uni-forms-item label="姓名" name="name">
							<uni-easyinput type="text" v-model="user.name" placeholder="请输入姓名"></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item label="证件号" name="certificateId">
							<uni-easyinput type="text" v-model="user.certificateId" placeholder="请输入证件号"></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item label="联系电话" name="phone">
							<uni-easyinput type="text" v-model="user.phone" placeholder="请输入电话"></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item label="区划">
							<picker :range="multiArray" @columnchange="columnChange" @change="finalchange" mode="multiSelector">
							    {{  multiArray[0][multiIndex[0]] }} --- {{ multiArray[1][multiIndex[1]] == null?"": multiArray[1][multiIndex[1]]}}
							</picker>
						</uni-forms-item>
						<uni-forms-item label="详细地址" name="detailAddr">
							<uni-easyinput type="text" v-model="user.detailAddr" placeholder="请输入详细地址"></uni-easyinput>
						</uni-forms-item>
					</uni-forms>
				</view>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flag:0,
				weekDay:[],
				weekDays:['日','一','二','三','四','五','六'],
				days:[],
				month:0,
				chooseMonth:0,
				chooseDay:0,
				monthDays:0,
				type:-1,
				time:null,
				timeId:-1,
				hospId:null,
				multiArray: [['请选择区划'],[]],     // picker 数组
				multiIndex: [0, 0], // picker index
				districts:[],		//区划原始数据
				streets:[]			,//街道原始数据
				districtId:-1,
				streetId:-1,
				user:{},
				resultMap:new Map(),
				hospInfo:null,
				tickets:[],
				timer:null,
				seconds:2,
				rules:{
					name:{
						rules:[
							{required:true,errorMessage:'请输入姓名'},
							{minLength:2,maxLength:10,errorMessage:'姓名长度在{minLength}到{maxLength}个字符'}
						]
					},
					certificateId:{
						rules:[
							{required:true,errorMessage:'请输入证件号'},
							{pattern:'^[1-9]\\d{5}(18|19|20)\\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\\d{3}[0-9Xx]$',errorMessage:'证件号格式错误'}
						]
					},
					phone:{
						rules:[
							{required:true,errorMessage:'请输入联系电话'},
							{pattern:'^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(17[013678])|(18[0,5-9]))\\d{8}$',errorMessage:'请正确填写联系电话'}
						]
					},
					detailAddr:{
						rules:[
							{required:true,errorMessage:'请输入详细地址'}
						]
					}
				}
			};
		},
		onLoad(options){
			this.type = options.type
			this.time = options.time.substr(0,10)
			this.hospId = options.hospId
			console.log('onload hospid'+this.hospId)
			this.getWeekDay()
			this.getDaysOfMonth()
			this.getMonthAndDays()
			this.getDistricts(1)
			this.getTickets()
		},
		mounted() {
			this.chooseMonth = this.month
			this.chooseDay = this.days[0]
			this.getHospInfo()
		},
		methods:{
			columnChange:function(e){
			    console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value)
			    //获得对象的 detail的 value
			    //通过数组的下标改变显示在页面的值
				var column = e.detail.column
				var value = e.detail.value
				if(column == 0){
					if(value == 16){
						value = 221
					}
					this.districtId = value+1
					this.getStreets()
				}
				
			},
			finalchange(e){
				console.log('最终修改的列为：' + e.detail.value)
				this.districtId = this.districts[e.detail.value[0]-1].id
				this.streetId = this.streets[e.detail.value[1]].id
				this.multiIndex = [e.detail.value[0],e.detail.value[1]]
				console.log('区划id:'+this.districtId)
				console.log('街道id:'+this.streetId)
			},
			open(timeId) {
				this.timeId = timeId
				console.log('timeId:'+this.timeId)
				this.$refs.popup.open()
			},
			/**
			* 点击取消按钮触发
			* @param {Object} done
			*/
			close() {
				this.$refs.popup.close()
				this.user = null
			},
			/**
			* 点击确认按钮触发
			* @param {Object} done
			* @param {Object} value
			*/
			confirm() {
				/* 412824199807051436 15938065835 郑州航院东校区 */
				if(this.user.district < 2 || this.user.street < 17){
					uni.showToast({
						title:'请选择区划街道',
						icon:'none',
						duration:2000
					})
					return;
				}
				this.$refs.form.validate().then(res=>{
					console.log('表单数据信息：', res);
					this.user.district = this.districtId
					this.user.street = this.streetId
					console.log('district:'+this.districtId)
					console.log('street:'+this.streetId)
					console.log("user:"+this.user.name+','+
					this.user.certificateId+','+
					this.user.district+','+
					this.user.street+","+
					this.user.detailAddr+','+
					this.user.phone)
					this.saveUser()
					console.log('chooseDay:'+this.chooseDay)
					
					uni.navigateTo({
						url:'/subpkg/order_detail/order_detail?'+
						'timeId='+this.timeId+
						'&hospId='+this.hospId+
						'&type='+this.type+
						'&chooseMonth='+this.chooseMonth+
						'&chooseDay='+this.chooseDay+
						'&certificateId='+this.user.certificateId
					})
					this.user = {}
					this.close()
				}).catch(err =>{
					console.log('表单错误信息：', err);
				})
			},
			getWeekDay(){
				uni.request({
					url:'http://192.168.43.224:9002/api/business/getWeekDays',
					method:'GET',
					success: (res) => {
						this.weekDay = res.data.data
						console.log(this.weekDay)
					}
				})
			},
			getDaysOfMonth(){
				uni.request({
					url:'http://192.168.43.224:9002/api/business/getDaysOfMonth',
					method:'GET',
					success: (res) => {
						this.days = res.data.data
						this.chooseDay = this.days[0]
						console.log(this.days)
					}
				})
			},
			chooseDate(e){
				let item = e.currentTarget.dataset.msgs
				console.log(item)
				this.chooseDay = item % this.monthDays
				this.flag = item - this.days[0]
				if(item < this.monthDays){
					this.chooseMonth = this.month
				}else{
					this.chooseMonth = this.month+1
				}
				
			},
			
			//获取当前月份和天数
			getMonthAndDays(){
				uni.request({
					url:'http://192.168.43.224:9002/api/business/getMonthAndDays',
					method:'GET',
					success: (res) => {
						this.month = res.data.data[0]
						this.monthDays = res.data.data[1]
						console.log(this.month)
						console.log(this.monthDays)
					}
				})
			},
			
			//获取区划
			getDistricts(id){
				uni.request({
					url:'http://192.168.43.224:9001/admin/addrdict/findAddrDictById/'+id,
					method:'GET',
					success: (res) => {
						this.districts = res.data.data
						for(var i = 0; i < this.districts.length; i++){
							this.multiArray[0].push(this.districts[i].name)
						}
					}
				})
			},
			
			//获取街道
			getStreets(){
				uni.request({
					url:'http://192.168.43.224:9001/admin/addrdict/findAddrDictById/'+this.districtId,
					method:'GET',
					success: (res) => {
						this.streets = res.data.data
						this.multiArray[1] = []
						if(this.streets != null){
							for(var i = 0; i < this.streets.length; i++){
								this.multiArray[1].push(this.streets[i].name)
							}
						}else{
							this.multiArray[1] = ['暂无数据']
						}
					}
				})
			},
			
			//保存用户信息
			saveUser(){
				console.log('saveUser:'+this.user.name+","+this.user.district)
				uni.request({
					url:'http://192.168.43.224:9002/user/saveUser',
					method:'POST',
					data:this.user,
					success: (res) => {
						console.log('baocun:'+res.data)
					}
				})
			},
			
			//获取检测点信息
			getHospInfo(){
				uni.request({
					url:'http://192.168.43.224:9001/admin/hospinfo/getHospInfoById/'+this.hospId,
					method:'GET',
					success: (res) => {
						this.hospInfo = res.data.data
						console.log('获取的hosp:'+this.hospInfo)
					}
				})
			},
			
			//获取号源数量
			getTickets(){
				uni.request({
					url:'http://192.168.43.224:9002/api/business/getTicket/'+this.hospId,
					method:'GET',
					success: (res) => {
						this.tickets = res.data.data
						console.log('haoliang:'+this.tickets)
					}
				})
			}
			
		}
	}
</script>

<style lang="scss">
.head-img{
	width: 100%;
	height: 100px;
	border: 1px solid #000000;
	color: #F0AD4E;
	position: relative;
	.head-img-text{
		position: absolute;
		top: 50px;
		left: 20px;
		color: #FFFFFF;
	}
}
.image{
	width: 100%;
	height: 100%;
}
.order-date{
	margin-top: 10px;
	// border: 1rpx solid #000000;
	width: 100%;
	height: 30px;
	display: flex;
	justify-content: space-between;
	background-color: #EBEEF5;
	box-shadow: 5rpx #C0C4CC;
}
.order-head{
	display: flex;
	.order-head-item{
		margin-left: 8px;
	}
}
.order-date-detail{
	margin-top: 10px;
	width: 100%;
	height: 90px;
	justify-content: space-between;
	box-shadow: 5rpx #C0C4CC;
	.order-date-detail-item{
		margin-top: 10px;
		margin-left: 10px;
		margin-right: 10px;
		margin-bottom: 10px;
	}
}
.line{
	display: block;
	background: #E0E3DA;
	width: 100%;
	height: 5rpx;
}
.choose{
	background-color: #F0AD4E;
}
.order-paiban{
	margin-top: 5px;
	width: 100%;
	height: 150px;
	justify-content: center;
	background-color: #EBEEF5;
	box-shadow: 5rpx #C0C4CC;
}
.order-choosedate{
	margin-left: 10px;
}
.order-order{
	margin-top: 10px;
	// border: 1rpx solid #000000;
	width: 100%;
	height: 50px;
	display: flex;
	background-color: #F2F6FC;
	box-shadow: 5rpx #C0C4CC;
	line-height: 50px;
}
.order-haoyuan{
	margin-left: 60px;
}
</style>
